<script setup>
import {getList as getComment,deleteOne} from "@/boot/comment.js";
import {getList} from "@/boot/rest.js";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
const comments = ref([])
const rest = ref([])
onMounted(()=>{
  getComment({userId:localStorage.getItem('userId')}).then(res=>{
    comments.value = res.data.data
  })
  getList({}).then(res=>{
    rest.value = res.data.data
  })
})
const findRest = (id) => {
  return rest.value.find(item => item.id === id)
}
const deleteComment = (id) => {
  deleteOne({id:id}).then(res=>{
    if(res.data.code === 200){
      ElMessage.success('删除成功')
      getComment({userId:localStorage.getItem('userId')}).then(res=>{
        comments.value = res.data.data
      })
    }
  })
}
</script>

<template>
  <div class="w-full h-full">
    <div class="w-2/3 m-auto">
      <el-table :data="comments">
        <el-table-column prop="restId" label="餐厅">
          <template #default="{row}">
            <span>{{findRest(row?.restId)?.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="评论内容">
        </el-table-column>
        <el-table-column prop="actions" label="操作">
          <template #default="{row}">
            <el-button @click="deleteComment(row.id)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<style scoped>

</style>